@import '../partial/variables'
@import '../mixin'

.menu
  position fixed
  z-index 3
  top 0
  left 0
  right 0
  bottom 0
  background-color rgba(0, 0, 0, 0.2)
.menu-wrap
  position fixed
  top 0
  left 0
  bottom 0
  width 7.6rem
  z-index 4
  box-shadow (8/75)rem 0 (20/75)rem color-hover
  background-color s-color-bg
  .header
    color color-font-white
    width 7.6rem
    height 3.6rem
    background-color rgba(33, 43, 52, 1)
    .h-item
      display flex
      justify-content space-between
      align-items center
      margin 0 (30/75)rem
      padding (20/75)rem 0
    .s
      padding (10/75)rem 0
    .user-img
      width 1.5rem
      height 1.5rem
      img
        border-radius 1rem
        width 1.5rem
        height 1.5rem
    .login-text    
      font-size (28/75)rem
    .info
      display flex
      flex-direction column
      font-size (26/75)rem
      color color-font-white - 60
      h4
        color color-font-white
        font-size (30/75)rem
    .logout
      padding-top 12px
      color color-font-white - 60
      a
        font-size (28/75)rem
  nav
    margin-top 0.1rem
    .nav-wrap
      margin-top (5/75)rem
      &:nth-last-child(2)
        border-bottom  1px solid color-border
      a
        color color-font + 30
        display block
        height 1.2rem
        line-height 1.2rem
        padding 0 0.3rem
        &:active
          background-color color-background-deep
      i 
        font-size 0.43rem
      .un-read
        display inline-block
        color color-green
      
      span
        font-size 0.43rem
        padding-left 15px
    .index
      #index
        background-color color-background-deep
    .good 
      #good
        background-color color-background-deep
      
    .share
      #share
        background-color color-background-deep
    
    .ask 
      #ask
        background-color color-background-deep
      
    .job 
      #job
        background-color color-background-deep
        
    .about 
      #about
        background-color color-background-deep
    .msg
      #msg
        background-color color-background-deep
        


.show-transition 
  transition: transform side-time ease-in-out
.show-enter, .show-leave 
  transform translate3d(-7rem, 0, 0)

.color-transition 
  transition: background-color side-time ease-in-out
.color-enter, .color-leave 
  background-color rgba(0, 0, 0, 0)